<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>京东移动站-首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--版心-->
<!--
1.最大宽度设置成了640px
2.设计稿psd的尺寸就是640px
3.目前：当设备的尺寸比设计稿不至于失真
4.640px的尺寸设计稿的原因，根据当前主要流行的设备尺寸有关系iPhone4,4s 尺寸320px
5.750px的设计稿：参考圆形iPhone6  尺寸375px
6.最小宽度320px  保证最小的宽度320px不让页面错乱
-->
    <div class="jd_container">
        <!--顶部搜索-->
        <header class="jd_search">
            <div class="jd_search_box">
                <a href="#" class="icon_logo"></a>
                <form action="#">
                    <span class="icon_search"></span>
                    <input type="search" placeholder="占位符">
                </form>
                <a href="#" class="login">登录</a>
            </div>
        </header>
        <!--轮播图-->
        <div class="jd_banner">
            <ul>
                <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
            </ul>
            <ul>
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!--导航栏-->
        <nav class="jd_nav">
            <ul class="clearFix">
                <li><a href="#"><img src="images/nav0.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav1.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav2.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav3.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav4.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav5.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav6.png" alt=""><p>分类</p></a></li>
                <li><a href="#"><img src="images/nav7.png" alt=""><p>分类</p></a></li>
            </ul>
        </nav>
        <!--产品区块-->
        <div class="jd_product">
            <section class="jd_product_box sk">  <!--second kill秒杀-->
                <div class="tit nb">
                    <div class="f_left">
                        <span class="icon"></span>
                        <span class="name">掌上秒杀</span>
                        <div class="time">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="f_right"><a class="m_r10" href="#">更多&gt;</a></div>
                </div>
                <div class="con">
                    <ul class="pro clearFix">
                        <li>
                            <a href="#"><img src="images/detail01.jpg" alt=""></a>
                            <p class="nowPrice">&yen;10.00</p>
                            <p class="oldPrice">&yen;100.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="images/detail02.jpg" alt=""></a>
                            <p class="nowPrice">&yen;10.00</p>
                            <p class="oldPrice">&yen;100.00</p>
                        </li>
                        <li>
                            <a href="#"><img src="images/detail01.jpg" alt=""></a>
                            <p class="nowPrice">&yen;10.00</p>
                            <p class="oldPrice">&yen;100.00</p>
                        </li> 	
                    </ul>
                </div>
            </section>
            <section class="jd_product_box">
                <div class="tit"><h3>京东超市</h3></div>
                <div class="con clearFix">
                    <a class="w_50p f_left br" href="#"><img src="images/cp1.jpg" alt=""></a>
                    <a class="w_50p f_right bb" href="#"><img src="images/cp2.jpg" alt=""></a>
                    <a class="w_50p f_right" href="#"><img src="images/cp3.jpg" alt=""></a>
                </div>
            </section>
            <section class="jd_product_box">
                <div class="tit"><h3>京东自营</h3></div>
                <div class="con clearFix">
                    <a class="w_50p f_right bl" href="#"><img src="images/cp4.jpg" alt=""></a>
                    <a class="w_50p f_left bb" href="#"><img src="images/cp5.jpg" alt=""></a>
                    <a class="w_50p f_left" href="#"><img src="images/cp6.jpg" alt=""></a>
                </div>
            </section>
            <section class="jd_product_box">
                <div class="tit"><h3>京东热门</h3></div>
                <div class="con clearFix">
                    <a class="w_50p f_left br" href="#"><img src="images/cp1.jpg" alt=""></a>
                    <a class="w_50p f_right bb" href="#"><img src="images/cp2.jpg" alt=""></a>
                    <a class="w_50p f_right" href="#"><img src="images/cp3.jpg" alt=""></a>
                </div>
            </section>
        </div>
    </div>
    
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>
</html>